<template>
  <div class="staff-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList(1)">
          <el-form-item>
            <el-select
              v-model="dg.ps.uname"
              filterable clearable
              placeholder="驾驶员名称"
              style="width: 120px">
              <el-option
                v-for="it in departmentOptions"
                :key="it.uname"
                :label="it.realName"
                :value="it.uname">
                <span>{{it.realName}}</span>
                <span>{{it.phone}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="dg.ps.remindType"
              placeholder="项目类型"
              style="width: 150px"
              clearable>
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList(1)">
            搜索
          </el-button>

          <el-button 
            type="primary" 
            icon="el-icon-s-claim" 
            @click="setUpdDriverCenterMd({state: true})">
            驾驶员证件资料更新
          </el-button>
        </el-form>
      </div>

      <TableSelfSet
        v-if="dg.columns.length > 0"
        :tbTitle="'人事报警'"
        :dgName="dg.dgName"
        :tbId="dg.tbName"
        :srcCols="dg.srcCols"
        :columns="dg.columns"
        @saveSet="saveTbSet"
      />
    </div>
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="index" 
        label="编号"
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{ row }">
          <template v-if="col.field == 'driver'">
            <span>{{ row.driver ? row.driver.realName : '' }}</span>
          </template>

          <template v-else-if="col.field == 'idCardExpire'">
            <span :style="setCls(row.reminds, 'IDCARD_EXPIRE')">
              {{ setTime(row.reminds, "IDCARD_EXPIRE") }}
            </span>
          </template>

          <template v-else-if="col.field == 'driverInspect'">
            <span :style="setCls(row.reminds, 'DRIVER_INSPECT')">
              {{ setTime(row.reminds, "DRIVER_INSPECT") }}
            </span>
          </template>

          <template v-else-if="col.field == 'driverExpire'">
            <span :style="setCls(row.reminds, 'DRIVER_EXPIRE')">
              {{ setTime(row.reminds, "DRIVER_EXPIRE") }}
            </span>
          </template>

          <template v-else-if="col.field == 'certiInspect'">
            <span :style="setCls(row.reminds, 'CERTI_INSPECT')">
              {{ setTime(row.reminds, "CERTI_INSPECT") }}
            </span>
          </template>

          <template v-else-if="col.field == 'restudyInspect'">
            <span :style="setCls(row.reminds, 'RESTUDY_INSPECT')">
              {{ setTime(row.reminds, "RESTUDY_INSPECT") }}
            </span>
          </template>

          <template v-else-if="col.field == 'bodytestInspect'">
            <span :style="setCls(row.reminds, 'BODYTEST_INSPECT')">
              {{ setTime(row.reminds, "BODYTEST_INSPECT") }}
            </span>
          </template>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList()"/>

    <UpdDriverCenter
      v-if="updDriverCenterMd.state"
      :myData="updDriverCenterMd"
      @myClick="setUpdDriverCenterMd"
      @reloadDg="getDgList()"
    />
  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";

import UpdDriverCenter from "./upd-driver-center";
import Team from "../../logistics-man/group-list/team";

import * as commonSer from "@/api/services/common.service";
import * as personManSer from "@/api/services/personMan.service";

export default {
  mixins: [DataGridResize, DataGridBase],
  components: { TableSelfSet, Pagination, UpdDriverCenter, Team },
  data() {
    let cols = [
      { label: "驾驶员", field: "driver" },
      { label: "身份证", field: "idCardExpire" },
      { label: "驾驶证年审", field: "driverInspect" },
      { label: "驾驶证换证", field: "driverExpire" },
      { label: "资格证", field: "certiInspect" },
      { label: "再教育", field: "restudyInspect" },
      { label: "体检有效期", field: "bodytestInspect" },
    ];
    return {
      dg: {
        dgName: "dg",
        tbName: "driverCenterTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1, rows: 20,
          // 驾驶员uname
          uname: "", 
          // 提醒类型
          remindType: "", 
        },
      },
      // 修改-驾驶员证件资料-弹框
      updDriverCenterMd: {state: false},
      
      // 项目类型-选择数据
      typeOptions: [
        { label: "全部项目", value: "ALL" },
        { label: "驾驶证年审", value: "DRIVER_INSPECT" },
        { label: "资格证年审", value: "CERTI_INSPECT" },
        { label: "体检有效期", value: "BODYTEST_INSPECT" },
        { label: "身份证有效期", value: "IDCARD_EXPIRE" },
        { label: "驾驶证有效期", value: "DRIVER_EXPIRE" },
        { label: "再教育年审", value: "RESTUDY_INSPECT" },
      ],
      // 驾驶员-选择数据
      departmentOptions: [], 

    };
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();

    that.init();
  },
  methods: {
    init() {
      // 获取-驾驶员-选择数据
      commonSer.getDriverDict({ containLeave: 1, containMain: 0 }).then(res => {
        this.departmentOptions = res?.data || [];
      });
    },
    // 设置-日期
    setTime(list, type) {
      let current = list.find(it => it.remindType === type);
      if (current) return this.U.datefmt(current.nextRemindTime, 'yyyy-MM-dd');
      return "未设置";
    },
    // 设置-文本样式
    setCls(list, type) {
      let color = "";
      let current = list.find(it => it.remindType === type);
      if (!current) {
        color = "#717377";
      } else {
        let ret = this.U.checkOverdue(current.nextRemindEarlyTime);
        color = ret ? "red" : "#11942e";
      }
      return { color };
    },
    /** 获取-分页列表数据 */
    getDgList(page) {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      ps.remindType = ps.remindType == 'ALL' ? '' : ps.remindType;

      if(page) ps.page = page;
      personManSer.getDriverList(ps).then(res => {
        if(res?.code != 1){
          U.qerror(res.msg);
        }else{
          let list = res?.data || [];
          list.forEach(it => { it.dgName = dg.dgName; });
          dg.list = list;
          dg.total = res?.count || 0;
        }
      });
    },

    // 显示/隐藏-更新驾驶员证件资料-弹框
    setUpdDriverCenterMd(e) {
      const that = this, U = that.U, md = that.updDriverCenterMd, rows = that.getSeledRows();

      if(!e.state){
        md.obj = null;
        md.state = false;
      }else{
        if(rows.length != 1){
          U.qerror('请选择一个驾驶员');
        }else{
          md.obj = rows[0];
          md.state = true;
        }
      }
    },
    
  },
};
</script>
